<template>
  <ark-page background-color="white">
    <div class="flex flex-col items-center justify-center h-screen bg-gray-100">
      <div class="mb-4">
        <span class="text-lg font-bold text-center">拼图游戏</span>
      </div>

      <div class="flex flex-col border-2 border-gray-400 bg-white">
        <div v-for="(row, rowIndex) in model.board" :key="rowIndex" class="flex flex-row">
          <div
              v-for="(tile, colIndex) in row"
              :key="colIndex"
              @click="moveTile(rowIndex, colIndex)"
              class="border border-gray-300 flex items-center justify-center"
              :style="{
          width: '160px',
          height: '160px',
          backgroundColor: tile === 0 ? '#e5e7eb' : '#f3f4f6',
          cursor: tile !== 0 ? 'pointer' : 'default'
        }" :focusable='true' :enableFocusBorder='true' :focusScale='1.05'
          >
            <span v-if="tile !== 0" class="text-2xl font-bold text-center text-gray-700">{{ tile }}</span>
          </div>
        </div>
      </div>

      <div class="mt-6">
        <div
            @click="resetGame"
            class="px-6 py-2 bg-blue-500 text-white rounded text-center"
            :focusable='true' :enableFocusBorder='true' :focusScale='1.05'
            :requestFocus='true'
        >
          <span class="text-center">重新开始</span>
        </div>
      </div>
    </div>
  </ark-page>
</template>
<script lang="ts" >
import {defineComponent} from "vue";
import ArkPage from "@/components/layouts/ArkPage.vue";

export default defineComponent({
  components: {ArkPage},
  data(){
    const model:any = { };
    return {
      model
    }
  },
  created() {
    this.init()
  },
  methods:{
    init() {
      this.model = {
        ...this.model,
        board: [
          [1, 2, 3],
          [4, 5, 6],
          [7, 8, 0]
        ],
        solved: false
      }
    },

    moveTile(row, col) {
      if (this.model.solved) return;

      const tileValue = this.model.board[row][col];
      if (tileValue === 0) return;

      // 检查上下左右是否有空白格子
      const directions = [
        {dx: -1, dy: 0},  // 上
        {dx: 1, dy: 0},   // 下
        {dx: 0, dy: -1},  // 左
        {dx: 0, dy: 1}    // 右
      ];

      for (const dir of directions) {
        const newRow = row + dir.dx;
        const newCol = col + dir.dy;

        if (newRow >= 0 && newRow < 3 && newCol >= 0 && newCol < 3) {
          if (this.model.board[newRow][newCol] === 0) {
            // 移动格子
            const newBoard = JSON.parse(JSON.stringify(this.model.board));
            newBoard[newRow][newCol] = tileValue;
            newBoard[row][col] = 0;

            this.model.board = newBoard;
            this.checkSolved();
            break;
          }
        }
      }
    },

    checkSolved() {
      const solvedState = [
        [1, 2, 3],
        [4, 5, 6],
        [7, 8, 0]
      ];

      const isEqual = JSON.stringify(this.model.board) === JSON.stringify(solvedState);
      if (isEqual) {
        this.model.solved = true;
        setTimeout(() => {
          alert('恭喜！拼图完成！');
        }, 100);
      }
    },

    resetGame() {
      alert('游戏已开始');
      // 创建初始状态
      let tiles = [1, 2, 3, 4, 5, 6, 7, 8, 0];

      // Fisher-Yates 洗牌算法
      for (let i = tiles.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [tiles[i], tiles[j]] = [tiles[j], tiles[i]];
      }

      // 转换为二维数组
      const newBoard = [];
      while (tiles.length) {
        newBoard.push(tiles.splice(0, 3));
      }

      this.model.board = newBoard;
      this.model.solved = false;
    }
  }
})
</script>
<style>
</style>
